<html>
<head>
    <title>WOFF fonts</title>
    <style type="text/css"><![CDATA[
    @font-face {
        font-family: "SourceSerifPro-Regular";
        src: url("SourceSerifPro-Regular.otf.woff") format("woff");
    }
    @font-face {
        font-family: "SourceSerifPro-Bold";
        src: url("SourceSerifPro-Bold.otf.woff") format("woff");
    }
    @font-face {
        font-family: "SourceSerifPro-Semibold";
        src: url("SourceSerifPro-Semibold.otf.woff") format("woff");
    }
    @font-face {
        font-family: "SourceSerifPro-Black";
        src: url("SourceSerifPro-Black.otf.woff") format("woff");
    }
    @font-face {
        font-family: "SourceSerifPro-Light";
        src: url("SourceSerifPro-Light.otf.woff") format("woff");
    }
    @font-face {
        font-family: "SourceSerifPro-ExtraLight";
        src: url("SourceSerifPro-ExtraLight.otf.woff") format("woff");
    }
    .regular {
        font-family: "SourceSerifPro-Regular";
    }
    .bold {
        font-family: "SourceSerifPro-Bold";
    }
    .semibold {
        font-family: "SourceSerifPro-Semibold";
    }
    .black {
        font-family: "SourceSerifPro-Black";
    }
    .light {
        font-family: "SourceSerifPro-Light";
    }
    .extralight {
        font-family: "SourceSerifPro-ExtraLight";
    }
    ]]></style>
</head>
<body>
<h1>Web Open Font Format (WOFF) fonts</h1>
<table width="100%" padding="3pt">
    <tr>
        <th>Font family</th>
        <th>Font name</th>
        <th>Example</th>
    </tr>
    <tr>
        <td rowspan="6">Source Serif Pro</td>
        <td>Regular</td>
        <td class="regular">quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>Bold</td>
        <td class="bold">quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>Semibold</td>
        <td class="semibold">quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>Black</td>
        <td class="black">quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>Light</td>
        <td class="light">quick brown fox jumps over the lazy dog</td>
    </tr>
    <tr>
        <td>Extra Light</td>
        <td class="extralight">quick brown fox jumps over the lazy dog</td>
    </tr>
</table>
</body>
</html>